import useModal from '@/hooks/modalHook'
import {IconImg} from '../image'
import {CnMediumSpan, CnNormalSpan} from '../text'

const AlarmAlert = defineComponent({
  setup(props, ctx) {
    const {visible, openModal, closeModal} = useModal()

    function handleBtnClick(e: MouseEvent) {
      const warningBtn = document.getElementsByClassName('alarmAlert-warningBtn')[0]
      if (e.target === warningBtn) {
        openModal()
      } else {
        closeModal()
      }
    }

    onMounted(() => {
      window.addEventListener('click', handleBtnClick)
    })

    onUnmounted(() => {
      window.removeEventListener('click', handleBtnClick)
    })

    return () => (
      <div class='relative w-60 h-full flex justify-center items-center'>
        <IconImg imgName='alert' class='alarmAlert-warningBtn w-20 h-20 cursor-pointer'></IconImg>
        {/* <CnMediumSpan class='absolute right-0 top-6  w-30 h-20 rounded-full bg-danger text-white flex justify-center items-center text-12'>
          99+
        </CnMediumSpan> */}
        <div
          class={[
            'absolute top-1/2 right-0 w-420  h-415 transition-all transform translate-y-16 rounded-4 z-10 overflow-hidden pt-46 pb-48 bg-white',
            visible.value ? 'page-show-opacity' : 'hidden'
          ]}
          style={{
            boxShadow: '0px 4px 10px 0px rgba(0,0,0,0.1)'
          }}
        >
          <div
            class='absolute top-0 left-0 w-full h-46 border-b-2 px-16 flex justify-between items-center'
            style={{
              borderColor: '#f1f4f9'
            }}
          >
            <CnMediumSpan class='text-14'>
              系统通知
              {/* （99+） */}
            </CnMediumSpan>

            <CnMediumSpan class='text-14 text-primary'>清空</CnMediumSpan>
          </div>

          <div class='w-full h-full overflow-auto'>
            {new Array(3).fill(0).map(item => (
              <div
                class=' w-full h-82 bg-white border-b-2 px-16 flex flex-col justify-center items-center gap-y-4 hover:bg-msgAlert'
                style={{
                  borderColor: '#f1f4f9'
                }}
              >
                <CnMediumSpan class='block w-full h-22 leading-22 text-xText'>
                  续费通知
                </CnMediumSpan>
                <div class='flex items-center gap-x-33'>
                  <CnNormalSpan class='flex-1 w-full h-22 leading-22 text-text '>
                    白马游泳馆服务即将到期：客服将在近期联系您
                  </CnNormalSpan>
                  <div
                    class='w-64 h-26 bg-white rounded-2 overflow-hidden border-2 flex items-center justify-center cursor-pointer'
                    style={{
                      borderColor: '#e2e2e2'
                    }}
                  >
                    <CnNormalSpan class='text-4xText'>设为已读</CnNormalSpan>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div
            class='absolute bottom-0 left-0 w-full h-50 px-16 flex items-center border-t-2'
            style={{
              borderColor: '#f1f4f9'
            }}
          >
            <div class='flex-1 h-50 flex justify-center items-center cursor-pointer'>
              <CnMediumSpan class='text-14 text-primary'>全部已读</CnMediumSpan>
            </div>
            <div class='flex-1 h-50 flex justify-center items-center cursor-pointer'>
              <CnMediumSpan class='text-14 text-primary'>查看全部</CnMediumSpan>
            </div>
          </div>
        </div>
      </div>
    )
  }
})

export default AlarmAlert
